<template>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
      <th>订单id</th>
      <th>订单编号</th>
      <th>订单者</th>
      <th>订单日期</th>
      <th>总消费</th>
      <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr v-for="i in list">
      <td>{{i.id}}</td>
      <td>{{i.code}}</td>
      <td>{{i.user_username}}</td>
      <td>
        {{i.time | showDate}}
      </td>
      <td>{{i.amount}}</td>
      <td><span @click="orderDetailClick(i)">查看</span></td>
    </tr>
    </tbody>
  </table>
</template>

<script>
  import {formatDate} from 'common/utils'
  export default {
    name: "Table",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    computed: {
    },
    methods: {
      orderDetailClick(order) {
        // console.log(order);
        this.$router.push({name: 'AdminToOrderDetail', params: {formData: order}})
      },
    },
    filters: { //过滤器
      showDate (value) {
        // 将时间戳转成date对象
        // const date = new Date(value * 1000) //因为时间戳是秒单位,要先乘1000化成毫秒

        // 将date进行格式化
        return formatDate(new Date(new Date(value).getTime()), 'yyyy-MM-dd hh:mm:ss')
      }
    }
  }
</script>

<style scoped>
  table thead tr {
    height: 50px;

    /*background-color: red;*/
  }
  table thead tr th { /*设置表头下划线*/
    border-bottom: 2px solid #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr {
    text-align: center;
    height: 50px;
    background-color: #fff;
  }
  table tbody tr td {
    border-bottom: 1px dashed #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr td img {
    height: 30px;
  }
  table tbody tr td span {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;

    color: white;
    border-radius: 6px;
    background-color: green;
  }
  table tbody tr td span:hover {
    opacity: 0.75;
    cursor: pointer;
  }
</style>